<template>
    <!-- 收藏文章组件 -->
    <van-icon
     :color="value.is_collected ? '#ffa500' : ''"
     :name="value.is_collected ? 'star':'star-o'"
     @click="onCollect"/>
</template>

<script>
import { addcollections, deletecollections } from '@/api/acticle'
export default {
  props: {
    value: {
      type: Object,
      requried: true
    }
  },
  name: 'collectIndex',
  methods: {
    // 1.判断是否为收藏状态
    // 2.已收藏，取消
    //      2.1后端更新：调节后
    //       2.2前端更新：改视图
    // 3.未收藏，执行收藏
    //      3.1后端更新：调节后
    //      3.2前端更新：改视图
    async onCollect () {
      try {
        if (this.value.is_collected) {
          await deletecollections(this.value.art_id)
        } else {
          await addcollections(this.value.art_id)
        }
        // eslint-disable-next-line vue/no-mutating-props
        this.value.is_collected = !this.value.is_collected
        // this.$emit('input', !this.value.is_collected)
        this.$toast.success(this.value.is_collected ? '收藏成功' : '取消收藏')
      } catch (err) {
        this.$toast.fail('操作失败')
      }
    }

  }
}
</script>

<style>

</style>
